<!doctype html>
<html lang="en">
<head>
    <title>Expander - Animation</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <link type="text/css" href="../../themes/wijmo/jquery.wijmo.wijutil.css" rel="stylesheet" />
    <link type="text/css" href="../../themes/wijmo/jquery.wijmo.wijexpander.css" rel="stylesheet" />
    <script src="../../wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../wijmo/jquery.wijmo.wijexpander.js"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#expander").wijexpander();

            $("#expander2").wijexpander({
                animated: "custom1", expanded: false
            });
            $("#expander3").wijexpander({
                animated: "custom2"
            });
            $("#expander4").wijexpander({
                animated: false
            });
            jQuery.wijmo.wijexpander.animations.custom1 = function (options) {
                this.slide(options, {
                    easing: "easeOutExpo",
                    duration: 900
                });
            }
            jQuery.wijmo.wijexpander.animations.custom2 = function (options) {
                if (options.expand)
                    options.content.show("puff", options, 300);
                else
                    options.content.hide("explode", options, 300);
            }
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Animation</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <h4>
                Default expander animation</h4>
            <div id="expander">
                <h3>
                    Header</h3>
                <div>
                    Vestibulum ut eros non enim commodo hendrerit. Donec porttitor tellus
                    non magna. Nam ligula elit, pretium et, rutrum non, hendrerit id, ante. Nunc mauris
                    sapien, cursus in.
                </div>
            </div>
            <h4>
                Custom expander animation</h4>
            <div id="expander2">
                <div>
                    Header</div>
                <div>
                    Vestibulum ut eros non enim commodo hendrerit. Donec porttitor tellus
                    non magna. Nam ligula elit, pretium et, rutrum non, hendrerit id, ante. Nunc mauris
                    sapien, cursus in.
                </div>
            </div>
            <h4>
                Custom animation using jQuery effects</h4>
            <div id="expander3">
                <div>
                    Header</div>
                <div>
                    Vestibulum ut eros non enim commodo hendrerit. Donec porttitor tellus
                    non magna. Nam ligula elit, pretium et, rutrum non, hendrerit id, ante. Nunc mauris
                    sapien, cursus in.
                </div>
            </div>
            <h4>
                Disabled animation</h4>
            <div id="expander4">
                <div>
                    Header</div>
                <div>
                    Vestibulum ut eros non enim commodo hendrerit. Donec porttitor tellus
                    non magna. Nam ligula elit, pretium et, rutrum non, hendrerit id, ante. Nunc mauris
                    sapien, cursus in.
                </div>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
            This sample shows several of the available animation effects that can be set using the animated option.
            </p>
        </div>
    </div>
</body>
</html>
